<script setup lang="ts">
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import Flower from "@/modal/Flower";
import type {Reactive} from "vue";

interface iFlower {
  flower: Reactive<Flower>;
}

const props = defineProps<iFlower>();
const flower = props.flower
const growUp = () => {
  emits('emitGrowUp', flower)
}
const emits = defineEmits(['emitGrowUp'])
const color = (iconType: IconType): IconColor => {
  if (iconType === IconType.SCORE) return IconColor.SCORE;
  if (iconType === IconType.GOODS) return IconColor.GOODS;
  if (iconType === IconType.FARM) return IconColor.IRRIGATE;
  if (iconType === IconType.FRUIT) return IconColor.IRRIGATE;
  if (iconType === IconType.APPLE) return IconColor.APPLE;
  if (iconType === IconType.PEACH) return IconColor.PEACH;
  if (iconType === IconType.BLACKBERRY) return IconColor.BLACKBERRY;
  if (iconType === IconType.RASPBERRY) return IconColor.RASPBERRY;
  if (iconType === IconType.TOOL) return IconColor.FERTILIZER;
  if (iconType === IconType.COMPOST) return IconColor.COMPOST;
  else return IconColor.NULL;
}
</script>

<template>
  <div class="flower-step col-2"
       @click="growUp">
    <span class="flower-item-title user-select-none" style="font-weight: bold">
      {{ flower.chineseName }}
      {{ flower.name }}
    </span>
    <div class="flower-content">
      <template v-for="(items,index) in flower.showTips"
                :key="index">
        <icon-font
          :icon-type="flower.currentStep > index &&
                      !items.isInsideIcon ?
                      IconType.FLOWER_ACTIVE:IconType.FLOWER_PASSIVE"
          :color="flower.currentStep > index ?
                  IconColor.FLOWER:IconColor.FLOWER_PASSIVE"
          :inside-icon="items.isInsideIcon"
          :is-desc="items.slotDesc"
          font-size="xx-large">
          <template #inside v-if="items.isInsideIcon">
            <icon-font
              class="slot-inside"
              :icon-type="flower.currentStep > index?
              items.insideIconType:flower.currentStep <= index?
              IconType.STAR:IconType.FLOWER"
              font-size="x-large">
            </icon-font>
          </template>
          <template #description v-if="items.slot">
            <div class="slot-description">
              <template v-if="items.slot.icon?.type">
                <icon-font
                  :icon-type="items.slot.icon.type"
                  :number="items.slot.icon.number"
                  :color="color(items.slot.icon.type)"
                  :is-desc="items.slotDesc"
                  font-size="x-large">
                  <template #description>{{ items.slot.icon.descIn }}
                  </template>
                </icon-font>
              </template>
              <template v-if="items.slot.descIcon?.type">
                <icon-font
                  :icon-type="items.slot.descIcon.type"
                  :number="items.slot.descIcon.number"
                  :color="color(items.slot.descIcon.type)"
                  :is-desc="items.slotDesc"
                  font-size="x-large">
                  <template #description>{{ items.slot.descIcon.descIn }}
                  </template>
                </icon-font>
              </template>
            </div>
          </template>
        </icon-font>
      </template>
    </div>
  </div>
</template>

<style scoped>
.flower-step {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
}

.flower-step > div > * {
  height: calc(100% / 7);
}

.flower-item-title {
  position: relative;
  height: 20px;
  text-align: left;
}

.flower-content {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: start;
  height: calc(100% - 20px);
}

.slot-description {
  display: flex;
  flex-wrap: wrap;
}

.slot-description > div {
  margin-right: 5px;
}
</style>